#{extends 'organization.html' /} 
#{set title:'Edit Organization' /}

<html>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"/>

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">

//			function deleteEntity(entId,orgId) {
//				$.ajax({
//				   type: "GET",
//				   url: "/EEntities/removeEntity",
//				   data: "entId="+entId+"&orgId="+orgId,
//				   success: function(html){
//				     $("#orgEntities").replaceWith(html);
//				   }
//				 });
//				}
				
			function confirmDel(entId, orgId){
$("#confirm").dialog({
        autoOpen: true,
        title:"Are you sure you want to delete this entity",
        width: 300,
        modal:true,
        buttons: {
        "Yes": function(){
        $.ajax({
				   type: "GET",
				   url: "/EEntities/removeEntity",
				   data: "entId="+entId+"&orgId="+orgId,
				   success: function(html){
				     $("#orgEntities").replaceWith(html);				     
				   }
				 });
				     $(this).dialog("close");
        },
        "No": function() {
            $(this).dialog("close");
        }
        }
       });
       }
    
				 
				 function editEntity(entId) {
				$.ajax({
				   type: "GET",
				   url: "/EEntities/editEntityView",
				   data: "id="+entId,
				   success: function(html){
				     $("#orgEntities").replaceWith(html);
				   }
				 });
				 
				 }
				 
				 function addEntity(orgId) {
				$.ajax({
				   type: "GET",
				   url: "/EEntities/addEntity",
				   data: "orgId="+orgId,
				   success: function(html){
				     $("#orgEntities").replaceWith(html);
				   }
				 });
				 
				 }
	</script>

<body>

#{ifErrors}
   <h1>All fields are required</h1>
#{/ifErrors}
<br></br>


#{if session.get("username") == null || session.get("username").equalsIgnoreCase("guest")}
<div class="error">
	<p class="error"> You must be connected to edit an organization </p>
</div>
<br></br>

<script type="text/javascript">

      $(document).ready(function() {
	
 		$('#background').hide().addClass( 'positioned' ); 
 			});
</script>

<a href = "@{Secure.login()}" > login now</a>
<a href="@{Users.register()}">New user? register now!</a>
#{/if}



<div id="background">
<form action="@{Organizations.editOrganization()}" method="POST">
 
<input type="hidden" name="orgId"  value=${org.id}></input> 
  
  <div class = "formEntry">
  	<div class = "formLabel">
  		<label>Organization Name</label>
  	</div> 
<input class="inputText" type="text" name="orgName" value=${org.name}></input>
<span class="error">#{error 'orgName' /}</span>
<div class = "clear"></div></div>
	
	<div class="formEntry">
		<div class="formLabel">
			<label>Privacy Status</label>
	</div>
<input class="inputText" type="radio" name="privacy" value="0"
 
#{if org.privacyStatus == 0}
				checked = "checked"
			#{/if}
			/><label>public</label> 
<input type="radio" name="privacy" value="1" 
#{if org.privacyStatus == 1}
				checked = "checked"
			#{/if}
			/> <label>private</label>
<input type="radio" name="privacy" value="2" 
#{if org.privacyStatus == 2}
				checked = "checked"
			#{/if}
			/> <label>secret</label>
<span class="error">#{error 'privacy' /}</span>
<div class = "clear"></div></div>
	
	<div class="formEntry">
		<div class = "formLabel">
			<label>Description</label>
	</div> 
<input class="inputText" type="text" name="orgDescription"
	value=${org.description}></input>
	<span class="error">#{error 'orgDescription' /}</span>
<div class = "clear"></div></div>
	
	<div class="formEntry">
<input type="submit" value="submit" id="submit"></input>
</div>
</form>

<div id="confirm"></div>

<br></br><br></br>
<div id="border">
<div id="orgEntities">
<h1>Organization Entities:</h1>
<br></br>
<div id="entities">
<div class="entities">#{list items:org.entities, as:'en'}
<div class="entity"><a id="entityName" href="@{Browse.viewEntity(en.id)}">${en.name}</a>

<br></br><br></br>
<a id ="editing" class="standardLink" href="javascript:editEntity(${en.id})">Edit this entity</a></div>
<a id ="removing" class="standardLink" href ="javascript:confirmDel(${en.id},${org.id})">Remove this entity</a>
<br></br><br></br><br></br>
#{/list}</div>
</div>
</div>
</div>
<a class="standardLink" href="javascript: addEntity(${org.id})"> Add entity</a>


<br></br>

<style type="text/css">
	#entityName{
		font-family: Verdana, helvetica;
		font-size: 1.5em;
	}
	#editing{
		font-style: italic;
	}
	#removing{
		font-style: italic;
	}
	#border{
	height:300px;
	overflow: auto;
	border-style: groove;
	border-color: navy;
	border-width:10px;
	-moz-border-radius: 10px;
  	-webkit-border-radius: 10px;  
  	border-radius: 10px;
	}
</style>

</body>
</div>
</html>